<template>
  <div class="login">
    <el-card shadow="hover" class="card">
      <h2>疫情打卡系统登录</h2>
      <el-form :model="form" status-icon class="demo-ruleForm">
        <el-form-item label="用户名" required>
          <el-input
            placeholder="请输入你的用户名"
            type="text"
            v-model="form.username"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码" required>
          <el-input
            placeholder="请输入你的密码"
            type="password"
            v-model="form.password"
          ></el-input>
        </el-form-item>

        <!-- <el-form-item label="">
          <el-button
            style="width: 100%;"
            type="primary"
            size="medium"

            id="TencentCaptcha"
            data-appid="2063556069"
            data-cbfn="callbackName"
            >点击验证</el-button
          >
        </el-form-item> -->

        <el-form-item label="">
          <el-button style="width: 100%;" @click="submitForm" type="primary"
            >登录</el-button
          >
        </el-form-item>
        <!-- <el-form-item label="">
          <el-button style="width: 100%;" @click="dgutSubmit" type="primary"
            >莞工中央认证登录</el-button
          >
        </el-form-item> -->
        <a href="https://cas.dgut.edu.cn/home/Oauth/getToken.html?appid=javaee">莞工中央认证登录入口</a>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { login } from "../network/index.js";
// window.code = false;
// window.callbackName = function(res) {
//   //ret = 0 为验证成功
//   if (res.ret === 0) {
//     window.code = true;
//     let node = document.getElementById("TencentCaptcha");
//     node.innerHTML = "验证成功";
//     node.setAttribute("type", "success");
//   }
// };

const Login = {
  name: "Login",
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    dgutSubmit(){
      this.$router.push('https://cas.dgut.edu.cn/home/Oauth/getToken.html?appid=javaee');
    },
    open(message, type) {
      this.$message({
        message,
        type,
      });
    },
    submitForm() {
      if (
        this.form.username == "" ||
        this.form.password == "" ||
        this.form.password == null ||
        this.form.username == null
      ) {
        this.open("请填写用户名和密码", "warning");
        return;
      }

      // if (!window.code) {
      //   this.open('请先完成验证','warning');
      //   return;
      // }

      //网络请求：登录获取信息
      console.log(this.form.username, this.form.password);
      login(this.form.username, this.form.password)
        .then((res) => {
          if (res.data.code == 200) {
            let token = res.data.data;

            this.$store.commit("setToken", token);

            //路由跳转
            this.$router.push("/form");
          } else throw new Error("用户名密码错误");
        })
        .catch((error) => {
          this.open(error, "warning");
        });
    },
  },
};

export default Login;
</script>

<style scoped>
.card {
  width: 50vh;
  position: fixed;
  left: calc(50% - 25vh);
  top: 20%;
}

h2 {
  text-align: center;
  color: #409eff;
}
</style>
